import React, { useEffect, useState } from "react";

import {
    Form,
    Input,
    Radio,
    Modal,
    message
} from 'antd';
import type { FormProps } from "antd"
import { getResourcesDetail, createResources, updateResources } from "./../../api/resource";
import UploadComponent from "./../../components/UploadComponent";
import { resourceFormType } from "../../types/resourceTypa";


type propsType = {
    isModalOpen: boolean;
    type: 'add' | 'edit';
    resourcesId?: number;
    handleCancel: () => void
}

const AddOrEdit = (props: propsType) => {
    const [form] = Form.useForm();
    const { isModalOpen, type, handleCancel } = props;
    const onFinish: FormProps<resourceFormType>['onFinish'] = (e) => {
        console.log(e)
        if (type === "add") {
            createResources({
                title: e.title,
                coverImgUrl: e.coverImgUrlFile[0].url,
                username: e.username,
                url: e.url,
                categoryId: 2,
                sourceUrl: e.sourceUrlFile[0].url,
                detailImagesUrl: e.detailImagesUrlFile && e.detailImagesUrlFile.map(item => item.url)
            }).then(res => {
                if (res.code === 0) {
                    message.success("新增成功")
                    handleCancel();
                }
            })
        } else {
            updateResources({
                resourcesId: props.resourcesId,
                title: e.title,
                coverImgUrl: e.coverImgUrlFile[0].url,
                username: e.username,
                url: e.url,
                categoryId: e.categoryId,
                sourceUrl: e.sourceUrlFile[0].url,
                detailImagesUrl: e.detailImagesUrlFile && e.detailImagesUrlFile.map(item => item.url)

            }).then(res => {
                if (res.code === 0) {
                    message.success("编辑成功")
                    handleCancel();
                }
            })
        }
    }
    const handBannerDetail = (e: number) => {
        getResourcesDetail({ resourcesId: e }).then(res => {
            if (res.code === 0) {
                form.setFieldsValue({
                    ...res.data,
                    coverImgUrlFile: [{ url: res.data.coverImgUrl, type: 'image/png' }],
                    sourceUrlFile: [{ url: res.data.sourceUrl, type: 'image/png' }],
                    detailImagesUrlFile: res.data.detailImagesUrl && res.data.detailImagesUrl.map(item => ({ url: item, type: 'image/png' }))
                });
            }
        })
    }
    useEffect(() => {
        form.resetFields();
        if (props.isModalOpen && props.type === "edit" && props.resourcesId) {
            handBannerDetail(props.resourcesId);
        }
    }, [props.isModalOpen])
    return (
        <>
            <Modal title={type === "add" ? "创建" : "编辑"} width={800} open={isModalOpen} onOk={form.submit} onCancel={handleCancel}>
                <Form
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 22 }}
                    layout="horizontal"
                    onFinish={onFinish}
                    form={form}
                    style={{ maxWidth: 1000 }}
                >
                    <Form.Item<resourceFormType> name="username" label="用户名称">
                        <Input />
                    </Form.Item>
                    <Form.Item<resourceFormType> label="封面图" name={"coverImgUrlFile"}>
                        <UploadComponent limit={1} />
                    </Form.Item>
                    <Form.Item<resourceFormType> name={"detailImagesUrlFile"} label="详情图">
                        <UploadComponent limit={9} />
                    </Form.Item>
                    <Form.Item<resourceFormType> name={"title"} label="标题">
                        <Input style={{ width: "100%" }} />
                    </Form.Item>
                    <Form.Item<resourceFormType> name={"categoryId"} label="分类">
                        <Input />
                    </Form.Item>
                    <Form.Item<resourceFormType> name={"url"} label="资源链接">
                        <Input />
                    </Form.Item>
                    <Form.Item<resourceFormType> name={'sourceUrlFile'} label="添加文件">
                        <UploadComponent limit={1} />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default AddOrEdit;